import React, { createElement } from 'react';
import { render } from 'react-dom';
// let { createElement } = require('react')
// let { render } = require('react-dom')

// {
//     tagName: 'div',
//     props: {},
//     children: []
// }


// createElement ==> 创建react元素(创建虚拟dom)
// createElement(标签名称，属性， 子节点)
// let oSpan = createElement('span', {}, '!!!')

// let oText = createElement('p', {}, ['我是字段', oSpan])

// let oDiv = createElement('div', {}, oText)

let oDiv = React.createElement(
    'div',
    null,
    React.createElement(
        'p',
        null,
        '\u6211\u662F\u5B57\u6BB5',
        React.createElement(
            'span',
            null,
            '!!!aaaaaaabbbbbKKKKK'
        )
    ),
    React.createElement(
        'h3',
        null,
        'sdsfs'
    )
);

// render ==> 把虚拟dom转换为真实的dom
// render(要渲染的元素, 要渲染的位置, 渲染完成后的callback)
render(oDiv, document.getElementById('root'), () => {
    console.log('渲染成功');
});

// jsx  
// 1.遇到 < 开始解析html结构  
// 2.遇到 { 开始解析js 

// babel index.jsx -o index.js
